<template>
  <div class="notifications-container">
    <h1>通知公告</h1>
    <el-timeline>
      <el-timeline-item
        v-for="(group, index) in groupedMessages"
        :key="index"
        :timestamp="group.month"
        placement="top"
      >
        <div v-for="message in group.messages" :key="message.id" class="message-item" @click="viewMessageDetail(message)">
          <el-icon class="message-icon"><Document /></el-icon>
          <div class="message-body">
            <div class="message-title">
              {{ message.title }}
              <span v-if="!message.read" class="unread-dot"></span>
            </div>
            <div class="message-content">{{ message.content }}</div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Document } from '@element-plus/icons-vue'

const router = useRouter()

const messages = ref([
  { id: 1, title: '通知1', content: '这是通知1的内容。', date: '2024-06-15', read: false },
  { id: 2, title: '通知2', content: '这是通知2的内容。', date: '2024-05-10', read: true },
  { id: 3, title: '通知3', content: '这是通知3的内容。', date: '2024-04-20', read: false },
  { id: 4, title: '通知4', content: '这是通知4的内容。', date: '2024-03-18', read: false },
  { id: 5, title: '通知5', content: '这是通知5的内容。', date: '2024-02-25', read: true },
  { id: 6, title: '通知6', content: '这是通知6的内容。', date: '2023-12-30', read: false },
  // 更多消息
])

const viewMessageDetail = (message) => {
  message.read = true
  router.push({ name: 'message-detail', query: { message: JSON.stringify(message) } })
}

// 将消息按月份分组
const groupedMessages = ref([])
const groupMessagesByMonth = () => {
  const now = new Date()
  const grouped = {}

  messages.value.forEach((message) => {
    const messageDate = new Date(message.date)
    let key = ''

    const monthDiff = (now.getFullYear() - messageDate.getFullYear()) * 12 + now.getMonth() - messageDate.getMonth()

    if (monthDiff === 0) {
      key = '本月'
    } else if (monthDiff === 1) {
      key = '上月'
    } else if (monthDiff === 2) {
      key = '两个月前'
    } else {
      key = '更早'
    }

    if (!grouped[key]) {
      grouped[key] = []
    }
    grouped[key].push(message)
  })

  groupedMessages.value = Object.keys(grouped).map((key) => ({
    month: key,
    messages: grouped[key]
  }))
}

groupMessagesByMonth()
</script>

<style scoped>
.notifications-container {
  padding: 20px;
  margin: auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.message-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.message-icon {
  font-size: 24px;
  color: #409EFF;
  margin-right: 15px;
}

.message-body {
  flex: 1;
  text-align: left;
}

.message-title {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
}

.message-content {
  margin-top: 5px;
  color: #666;
}

.unread-dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}
</style>
